<template>
	<view class="hand-tem-bg">
		<view class="tab-bg">
			<view v-for="(item, index) in tabList" :key="index"
				:class="currentTabPosition==item.tabIndex?'tab-item-selected-bg':'tab-item-unselect-bg'" 
				@click="chooseTab(item, index)"
			>
				<view class="tab-txt">{{item.name}}</view>
			</view>
		</view>
		<view class="hand-tem-content-bg">
			<view v-if="currentTabPosition==tabList[0].tabIndex">
				<view class="process-num-bg">
					<view class="title-txt">任务名称</view>
					<view class="num-txt">
						<input placeholder="请输入" v-model="taskName"/>
					</view>
				</view>
				
				<view class="whole-width-bg">
					<view class="btn1-bg mar-right" @click="init()">重置面板</view>
					<view class="btn1-bg mar-left" @click="saveAndModifyTask">{{isModifyHandTemplate? '修改任务' :'保存任务'}}</view>
				</view>
				<!-- <view class="whole-width-bg">
					<view class="btn1-bg">重置面板</view>
				</view> -->
				<view class="whole-width-bg">
					<view class="btn1-bg mar-right" @click="startDrag">切换为手动</view>
					<view class="btn1-bg mar-left" @click="stopDrag">切换为自动</view>
				</view>
				<view class="task-title">操作模式</view>
				<picker mode="selector" :range="operateModalList" range-key="name" @change="onOperateModalChange">
					<view class="picker">
						{{selectedOperateModalBean ? selectedOperateModalBean.name : '请选择操作模式'}}
					</view>
				</picker>
			</view>
			
			<view v-if="currentTabPosition==tabList[1].tabIndex">
				<view class="task-title">工艺名称</view>
				<view class="process-name-bg">
					<input placeholder="名称" v-model="processInputName" disabled=""/>
				</view>
				<view class="whole-width-bg">
					<view class="btn1-bg mar-right" @click="toProcessListView">全局工艺</view>
					<view class="btn1-bg mar-left" @click="toProcessEditView">工艺定制</view>
				</view>
				<view class="task-title">焊接方式</view>
				<picker mode="selector" :range="weldingTypeList" range-key="name" @change="onWeldingTypeChange">
					<view class="picker">
						{{selectedWeldingTypeBean ? selectedWeldingTypeBean.name : '请选择焊接方式'}}
					</view>
				</picker>
			</view>
			
			<!-- <view v-if="currentTabPosition==tabList[2].tabIndex">
				<view class="task-title">焊接方式</view>
				<picker mode="selector" :range="weldingTypeList" range-key="name" @change="onWeldingTypeChange">
					<view class="picker">
						{{selectedWeldingType ? selectedWeldingType.name : '请选择焊接方式'}}
					</view>
				</picker>
				<view class="whole-width-bg mar-top">
					<view class="btn1-bg mar-right">中间点</view>
					<view class="btn1-bg mar-left">熄弧点</view>
				</view>
				<view class="whole-width-bg">
					<view class="btn1-bg mar-right">前过渡点</view>
					<view class="btn1-bg mar-left">后过渡点</view>
				</view>
			</view>
			
			<view v-if="currentTabPosition==tabList[3].tabIndex">
				<view class="whole-width-bg">
					<view class="btn1-bg">安全点</view>
				</view>
				<view class="whole-width-bg">
					<view class="btn1-bg">拍照点</view>
				</view>
				<view class="whole-width-bg">
					<view class="btn1-bg">自动拍照点射</view>
				</view>
			</view> -->
			
			<view v-if="currentTabPosition==tabList[2].tabIndex">
				<view class="task-title">矫正姿态</view>
				<!-- <view class="process-name-bg">
					<input placeholder="请输入"/>
				</view> -->
				<view class="pose-point-xyz-bg">
					<input placeholder="请输入X点" type="digit" v-model="pointW"/>
					<input placeholder="请输入Y点" class="mar-left mar-right" type="digit" v-model="pointP"/>
					<input placeholder="请输入Z点" type="digit" v-model="pointR"/>
				</view>
				<!-- <view class="process-name-bg">
					<input placeholder="备注"/>
				</view> -->
				<view class="task-title">点位</view>
				<view class="pose-point-xyz-bg">
					<input placeholder="请输入X点" type="digit" v-model="pointX"/>
					<input placeholder="请输入Y点" class="mar-left mar-right" type="digit" v-model="pointY"/>
					<input placeholder="请输入Z点" type="digit" v-model="pointZ"/>
				</view>
				<view class="whole-width-bg mar-top">
					<!-- <view class="btn1-bg mar-right">取点</view> -->
					<view class="btn1-bg" @click="changeChoosePoint">应用</view>
				</view>
			</view>
			
			<view v-if="currentTabPosition==tabList[3].tabIndex">
				<view class="other-setting-bg">
					<image src="../static/tabs/assembly-active.png" class="other-setting-img"></image>
					<view class="other-setting-txt">其他设置功能即将上线</view>
				</view>
			</view>
		</view>
		
		<view v-show="currentTabPosition!=(tabList.length-1)">
			<robotBottomMoveVue
				ref="refBottomMove"
				:stickyTop="dragTop"
				@noticePointDataToHandTemplate="noticePointDataToHandTemplate"
			></robotBottomMoveVue>
		</view>
	</view>
</template>

<script>
	import robotApi from '../apis/robotApi';
	import * as Constants from '@/common/constants.js';
	import localStore from '@/common/localStore.js'
	import robotBottomMoveVue from '@/components/robot-bottom-move.vue';
	export default {
		name:"robot-hand-template",
		components: {
			robotBottomMoveVue
		},
		data() {
			return {
				tabList: [
					{
						name: "任务",
						tabIndex: 0
					},
					{
						name: "工艺",
						tabIndex: 1
					},
					// {
					// 	name: "路径",
					// 	tabIndex: 2
					// },
					// {
					// 	name: "拍照",
					// 	tabIndex: 3
					// },
					{
						name: "位姿",
						tabIndex: 2
					},
					{
						name: "其他",
						tabIndex: 3
					}
				],
				/**
				 * 当前选择的tab下标
				 */
				currentTabPosition: 0,
				/**
				 * 模版：任务名称
				 */
				taskName: "",
				taskDetailId: this.currentTemplateTaskId,
				/**
				 * 模版：任务的操作模式
				 */
				operateModalList: [
					{
						name: "取点"
					}
				],
				/**
				 * 模版：选中的任务操作模式对象
				 */
				selectedOperateModalBean: null,
				/**
				 * 模版：选中的任务操作模式下标
				 */
				selectedOperateModalIndex: -1,
				/**
				 * 模版：工艺的焊接方式
				 */
				weldingTypeList: [],
				/**
				 * 模版：选中的焊接方式对象
				 */
				selectedWeldingTypeBean: null,
				/**
				 * 模版：选中的焊接方式下标
				 */
				selectedWeldingTypeIndex: -1,
				/**
				 * 模版：工艺名称
				 */
				processInputName: this.processName,
				processInputNo: this.processNo,
				/**
				 * 模版：底部BottomMoveView距顶部多高固定，为了一直显示编辑按钮
				 */
				dragTop: this.stickyTop,
				
				openCurrentViewFromType: this.showCurrentPageFrom,
				/**
				 * 手动模版：点击底部bottomMoveView取点的数据，由子组件BottomMoveView传递
				 */
				handTemplatePagePointData: null,
				/**
				 * 手动模版：点击底部bottomMoveView哪个下标的取点，由子组件BottomMoveView传递
				 */
				clickPointIndex: -1,
				/**
				 * 手动模版：点击底部bottomMoveView取点的数据赋值给位姿，位姿tab里可修改该取点值
				 */
				pointX: "",
				pointY: "",
				pointZ: "",
				pointW: "",
				pointP: "",
				pointR: "",
				
				isModifyHandTemplate: false,
				
				isAddOrModifyHandTemplate: false,
			};
		},
		props: {
			stickyTop: {
				type: Number,
				default: 84
			},
			showCurrentPageFrom: {
				type: Number,
				default: 0
			},
			processNo: {
				type: Number,
				default: -1
			},
			processName: {
				type: String,
				default: ""
			},
			currentTemplateTaskId: {
				type: String,
				default: ""
			}
		},
		watch: {
			
		},
		onShow() {
			console.log("HandTemplateView onShow")
		},
		mounted() {
			console.log("HandTemplateView mounted")
			console.log("openCurrentViewFromType -->" + this.openCurrentViewFromType)
			console.log("showCurrentPageFrom -->" + this.showCurrentPageFrom)
			console.log("processNo -->" + this.processNo)
			console.log("processName -->" + this.processName)
			console.log("processInputNo -->" + this.processInputNo)
			console.log("processInputName -->" + this.processInputName)
			console.log("stickyTop -->" + this.stickyTop)
			
			this.getWeldingTypeDictList()
			
			this.selectedOperateModalIndex = 0
			this.selectedOperateModalBean = this.operateModalList[this.selectedOperateModalIndex]
			
			
			if (this.openCurrentViewFromType != 0 && this.openCurrentViewFromType != 8) {
				console.log("修改或新增工艺返回时，获取保存的数据")
				this.resumeLocalViewData()
			}
			
			if (this.openCurrentViewFromType == 8 && this.taskDetailId && this.taskDetailId != "") {
				this.isModifyHandTemplate = true
				this.getTemplateDetail(this.taskDetailId)
			}
			
			let _this = this
			uni.$on("noticeIndexShowHandTemplateViewFromTemplateListView", function(data, index) {
				// 模板列表页面点击修改后切换到手动模板界面进行修改
				console.log("--当前在手动模板界面，在模板列表页面点击修改返回-->" + JSON.stringify(data) + "-->" + index)
				_this.isModifyHandTemplate = true
				_this.openCurrentViewFromType = Constants.INDEX_SHOW_HAND_TEMPALTE_FROM_TEMPLATE_LIST_MODIFY
				_this.taskDetailId = data.templateTaskId
				_this.getTemplateDetail(data.templateTaskId)
			})
			uni.$on("noticeHandTemplateChooseProcessBack", function(data,index) {
				console.log("--当前在手动模板界面，全局工艺进入工艺列表后，选择工艺返回-->" + JSON.stringify(data) + "-->" + index)
				_this.processInputName = data.name
				_this.processInputNo = data.number
			})
		},
		methods: {
			init() {
				this.selectedOperateModalIndex = 0
				this.selectedOperateModalBean = this.operateModalList[this.selectedOperateModalIndex]
				this.selectedWeldingTypeIndex = 0
				this.selectedWeldingTypeBean = this.weldingTypeList[this.selectedWeldingTypeIndex]
				this.openCurrentViewFromType = 0
				this.taskName = ""
				this.processInputName = ""
				this.processInputNo = ""
				this.pointX = 0
				this.pointY = 0
				this.pointZ = 0
				this.pointW = 0
				this.pointP = 0
				this.pointR = 0
				this.isModifyHandTemplate = false
				this.taskDetailId = ""
				this.handTemplatePagePointData = null
				this.clickPointIndex = -1
				this.$refs.refBottomMove.init()
			},
			
			getWeldingTypeDictList() {
				robotApi.getWeldingTypeDictData({})
					.then(res => {
						console.log("获取焊接类型 成功：" + JSON.stringify(res))
						if (res.code == 200 || res.code == "200") {
							this.weldingTypeList = res.data
							this.selectedWeldingTypeIndex = 0
							this.selectedWeldingTypeBean = this.weldingTypeList[this.selectedWeldingTypeIndex]
						}
					})
			},
			
			getTemplateDetail(id) {
				let data = {
					id: id
				}
				robotApi.getTemplateDetail(data)
					.then(res => {
						console.log("获取模板详情成功")
						if (res.code == 200 || res.code == "200") {
							this.taskName = res.data.name
							this.pointX = 0
							this.pointY = 0
							this.pointZ = 0
							this.pointW = 0
							this.pointP = 0
							this.pointR = 0
							this.getPointsDataFormDetail(res.data.templatePathPoints)
							
							if (this.openCurrentViewFromType == Constants.INDEX_SHOW_HAND_TEMPALTE_FROM_TEMPLATE_LIST_MODIFY) {
								this.processInputNo = res.data.craftNumber
								this.processInputName = res.data.craftName
							}
						}
					})
			},
			getPointsDataFormDetail(templatePathPoints) {
				let list = []
				for(let i = 0; i < templatePathPoints.length; i++) {
					let templateBean = templatePathPoints[i]
					let pointBean = {
						isFixed: false,
						pointType: templateBean.pointType
					}
					pointBean.name = this.getPointNameByPointType(templateBean.pointType)
					let data = {
						jogpos: {},
						xyzwpr: {}
					}
					data.jogpos = this.parseStringToObj(1, templateBean.jogpos)
					data.xyzwpr = this.parseStringToObj(2, templateBean.xyzwpr)
					pointBean.data = data
					list.push(pointBean)
				}
				console.log("list-->" + JSON.stringify(list))
				this.$refs.refBottomMove.parentSetListData(list)
			},
			getPointNameByPointType(pointType) {
				let pointName = ""
				switch(pointType) {
					case Constants.POINT_TYPE.SAFE_POINT:
						pointName = Constants.POINT_NAME.SAFE_POINT
						break;
					case Constants.POINT_TYPE.ARCING_POINT:
						pointName = Constants.POINT_NAME.ARCING_POINT
						break;
					case Constants.POINT_TYPE.INTERMEDIATE_POINT:
						pointName = Constants.POINT_NAME.INTERMEDIATE_POINT
						break;
					case Constants.POINT_TYPE.EXTINGUISHING_POINT:
						pointName = Constants.POINT_NAME.EXTINGUISHING_POINT
						break;
					case Constants.POINT_TYPE.TRANSITIONS_POINT:
						pointName = Constants.POINT_NAME.TRANSITIONS_POINT
						break;
					case Constants.POINT_TYPE.PHOTO_POSITION:
						pointName = Constants.POINT_NAME.PHOTO_POSITION
						break;
					case Constants.POINT_TYPE.PHOTO_SAFE_POINT:
						pointName = Constants.POINT_NAME.PHOTO_SAFE_POINT
						break;
				}
				return pointName
			},
			parseStringToObj(stringType, stringValue) {
				let obj = {}
				if (stringType == 1) {
					// 获取jogpos
					let array = stringValue.split(",")
					if (array.length == 6) {
						obj.j1 = array[0]
						obj.j2 = array[1]
						obj.j3 = array[2]
						obj.j4 = array[3]
						obj.j5 = array[4]
						obj.j6 = array[5]
					}
				} else if (stringType == 2) {
					// 获取xyzwpr
					let array = stringValue.split(",")
					if (array.length == 6) {
						obj.x = array[0]
						obj.y = array[1]
						obj.z = array[2]
						obj.w = array[3]
						obj.p = array[4]
						obj.r = array[5]
					}
				}
				return obj
			},
			
			/**
			 * 切换tab
			 * @param {Object} item
			 * @param {Object} index
			 */
			chooseTab(item, index) {
				if (this.currentTabPosition != item.tabIndex) {
					this.currentTabPosition = item.tabIndex
				}
			},
			
			/**
			 * 任务选择操作模式时触发
			 * @param {Object} e
			 */
			onOperateModalChange(e) {
				this.selectedOperateModalIndex = e.detail.value
				this.selectedOperateModalBean = this.operateModalList[this.selectedOperateModalIndex]
			},
			
			/**
			 * 跳转到工艺列表，选择工艺返回
			 */
			toProcessListView() {
				this.saveLocalViewData()
				uni.navigateTo({
					url: "/pages/robot/processTemplate?toProcessListFromPage=" + Constants.IN_PROCESS_LIST_VIEW_FROM_HAND_TEMPLATE_VIEW
				})
			},
			/**
			 * 需要通知 父组件index 显示 工艺编辑子组件
			 */
			toProcessEditView() {
				this.saveLocalViewData()
				// 通知父组件切换到工艺编辑，并带参数表示从哪里来通知显示工艺编辑页面
				this.$emit("changeToProcessEditView", Constants.INDEX_SHOW_PROCESS_EDIT_FROM_HAND_TEMPLATE)
			},
			
			saveLocalViewData() {
				// 先保存当前编辑的数据
				let data = {
					selectedOperateModalIndex: this.selectedOperateModalIndex,
					selectedWeldingTypeIndex: this.selectedWeldingTypeIndex,
					openCurrentViewFromType: this.openCurrentViewFromType,
					taskName: this.taskName,
					processInputName: this.processInputName,
					processInputNo: this.processInputNo,
					pointX: this.pointX,
					pointY: this.pointY,
					pointZ: this.pointZ,
					pointW: this.pointW,
					pointP: this.pointP,
					pointR: this.pointR,
					isModifyHandTemplate: this.isModifyHandTemplate,
					taskDetailId: this.taskDetailId,
					handTemplatePagePointData: this.handTemplatePagePointData,
					clickPointIndex: this.clickPointIndex,
				}
				let dragList = this.$refs.refBottomMove.parentGetListData()
				console.log("跳转保存当前页面数据时，获取子组件的点数据 -->" + JSON.stringify(dragList))
				data.list = dragList
				localStore.saveHandTemplateViewEditingData(data)
			},
			
			resumeLocalViewData() {
				console.log("恢复页面数据")
				let localData = localStore.getHandTemplateViewEditingData();
				if (localData) {
					console.log("localData -->" + JSON.stringify(localData))
					this.selectedOperateModalIndex = localData.selectedOperateModalIndex
					this.selectedOperateModalBean = this.operateModalList[this.selectedOperateModalIndex]
					this.selectedWeldingTypeIndex = localData.selectedWeldingTypeIndex
					this.selectedWeldingTypeBean = this.weldingTypeList[this.selectedWeldingTypeIndex]
					// this.openCurrentViewFromType = localData.openCurrentViewFromType
					this.taskName = localData.taskName
					// this.processInputName = localData.processInputName
					// this.processInputNo = localData.processInputNo
					this.pointX = localData.pointX
					this.pointY = localData.pointY
					this.pointZ = localData.pointZ
					this.pointW = localData.pointW
					this.pointP = localData.pointP
					this.pointR = localData.pointR
					this.isModifyHandTemplate = localData.isModifyHandTemplate
					this.taskDetailId = localData.taskDetailId
					this.handTemplatePagePointData = localData.handTemplatePagePointData
					this.clickPointIndex = localData.clickPointIndex
					let list = localData.list
					this.$refs.refBottomMove.parentSetListData(list)
				}
			},
			
			/**
			 * 工艺焊接方式变化时触发
			 * @param {Object} e
			 */
			onWeldingTypeChange(e) {
				this.selectedWeldingTypeIndex = e.detail.value
				this.selectedWeldingTypeBean = this.weldingTypeList[this.selectedWeldingTypeIndex]
			},
			
			/**
			 * 获取子组件（底部可拖拽删除的组件）点击取的点数据，更新到位姿上
			 * @param {Object} data
			 */
			noticePointDataToHandTemplate(data, clickPointIndex) {
				this.handTemplatePagePointData =  data
				this.clickPointIndex = clickPointIndex
				if (this.handTemplatePagePointData != null) {
					this.getXyzwpr(this.handTemplatePagePointData)
				}
			},
			
			/**
			 * 将位姿上输入框的值，赋给到取点数据
			 */
			changeChoosePoint() {
				if (this.handTemplatePagePointData && this.clickPointIndex != -1) {
					this.handTemplatePagePointData.xyzwpr.x = this.pointX
					this.handTemplatePagePointData.xyzwpr.y = this.pointY
					this.handTemplatePagePointData.xyzwpr.z = this.pointZ
					this.handTemplatePagePointData.xyzwpr.w = this.pointW
					this.handTemplatePagePointData.xyzwpr.p = this.pointP
					this.handTemplatePagePointData.xyzwpr.r = this.pointR
					this.$refs.refBottomMove.changeChoosePointData(this.handTemplatePagePointData, this.clickPointIndex)
				}
			},
			
			getXyzwpr(value) {
				this.pointX = value.xyzwpr.x
				this.pointY = value.xyzwpr.y
				this.pointZ = value.xyzwpr.z
				this.pointW = value.xyzwpr.w
				this.pointP = value.xyzwpr.p
				this.pointR = value.xyzwpr.r
			},
			
			saveAndModifyTask() {
				if (this.isModifyHandTemplate) {
					console.log("修改任务")
					this.modifyHandTask()
				} else {
					console.log("保存任务")
					this.saveTask()
				}
			},
			
			startDrag() {
				robotApi.startDragMove({})
					.then(res => {
						if (res.code == 200 || res.code == "200") {
							
						}
					})
			},
			
			stopDrag() {
				robotApi.stopDragMove({})
					.then(res => {
						if (res.code == 200 || res.code == "200") {
							
						}
					})
			},
			
			modifyHandTask() {
				let data = {
					templateTaskId: this.taskDetailId,
					name: this.taskName,
					craftNumber: this.processInputNo,
					craftName: this.processInputName,
					weldingMethod: this.selectedWeldingTypeBean.code
				}
				let dragList = this.$refs.refBottomMove.parentGetListData()
				console.log("dragList -->" + JSON.stringify(dragList))
				let templatePathPoints = []
				for (let i = 0; i < dragList.length; i++) {
					let pointBean = dragList[i]
					let temBean = {
						pointType: pointBean.pointType,
						jogpos: this.parseObjectToString(1, pointBean.data.jogpos),
						xyzwpr: this.parseObjectToString(2, pointBean.data.xyzwpr),
						sort: i	
					}
					templatePathPoints.push(temBean)
				}
				data.templatePathPoints = templatePathPoints
				if (this.isAddOrModifyHandTemplate) {
					uni.showToast({
						title: "修改模板中"
					})
					return
				}
				this.isAddOrModifyHandTemplate = true
				robotApi.updateHandTemplate(data)
					.then(res => {
						console.log("修改模板成功：" + JSON.stringify(res))
						this.isAddOrModifyHandTemplate = false
						if (res.code == 200 || res.code == "200") {
							uni.showToast({
								title: "修改模板成功",
								position: "bottom"
							})
							this.$refs.refBottomMove.init()
							this.init()
							let _this = this
							setTimeout(function() {
								uni.navigateTo({
									url: "/pages/robot/weldingTemplate"
								})
							}, 200)
						}
					})
					.catch(error => {
						this.isAddOrModifyHandTemplate = false
					})
			},
			
			saveTask() {
				if (!this.taskName || this.taskName == "") {
					uni.showToast({
						title: "请输入模板名称",
						position: "bottom"
					})
					return
				}
				if (!this.processInputNo || this.processInputNo == "" || !this.processInputName || this.processInputName == "") {
					uni.showToast({
						title: "请选择工艺",
						position: "bottom"
					})
					return
				}
				if (!this.selectedWeldingTypeBean)  {
					uni.showToast({
						title: "请选择焊接方式",
						position: "bottom"
					})
					return
				}
				let dragList = this.$refs.refBottomMove.parentGetListData()
				console.log("dragList -->" + JSON.stringify(dragList))
				for (let i = 0; i < dragList.length; i++) {
					let pointBean = dragList[i]
					if (!pointBean.data) {
						uni.showToast({
							title: "请取完所有点",
							position: "bottom"
						})
						return
					}
				}
				let data = {
					name: this.taskName,
					craftNumber: this.processInputNo,
					craftName: this.processInputName,
					weldingMethod: this.selectedWeldingTypeBean.code
				}
				let templatePathPoints = []
				for (let i = 0; i < dragList.length; i++) {
					let pointBean = dragList[i]
					let temBean = {
						pointType: pointBean.pointType,
						jogpos: this.parseObjectToString(1, pointBean.data.jogpos),
						xyzwpr: this.parseObjectToString(2, pointBean.data.xyzwpr),
						sort: i	
					}
					templatePathPoints.push(temBean)
				}
				data.templatePathPoints = templatePathPoints
				if (this.isAddOrModifyHandTemplate) {
					uni.showToast({
						title: "新增模板中"
					})
					return
				}
				this.isAddOrModifyHandTemplate = true
				robotApi.saveTemplate(data)
					.then(res => {
						console.log("保存模板成功：" + JSON.stringify(res))
						this.isAddOrModifyHandTemplate = false
						if (res.code == 200 || res.code == "200") {
							uni.showToast({
								title: "添加模板成功",
								position: "bottom"
							})
							this.$refs.refBottomMove.init()
							this.init()
						}
					})
					.catch(error => {
						this.isAddOrModifyHandTemplate = false
					})
			},
			parseObjectToString(type, value) {
				let res = ""
				if (type == 1) {
					res = value.j1 + "," + value.j2 + "," + value.j3 + "," + value.j4 + "," + value.j5 + "," + value.j6
				} else if (type == 2) {
					res = value.x + "," + value.y + "," + value.z + "," + value.w + "," + value.p + "," + value.r
				}
				return res
			},
		}
	}
</script>

<style scoped lang="scss">
	.hand-tem-bg {
		background-color: #1e40af;
	}
	.tab-bg {
		background-color: #1e3a8a;
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		height: 80rpx;
		box-sizing: border-box;
	}
	.tab-item-selected-bg {
		padding: 0 20rpx 20rpx 20rpx;
		border-bottom: 2rpx solid rgba(59, 130, 246, 1);
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.tab-item-unselect-bg {
		padding: 0 20rpx 20rpx 20rpx;
		color: rgba(148, 163, 184, 1);
		font-size: 30rpx;
	}
	
	.hand-tem-content-bg {
		padding: 40rpx;
	}
	.process-num-bg {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.title-txt {
		min-width: 200rpx;
		color: #FFFFff;
		font-size: 28rpx;
	}
	.num-txt {
	}
	.whole-width-bg {
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: 30rpx;
	}
	.btn1-bg {
		padding: 20rpx 0;
		flex: 1;
		border-radius: 16rpx;
		background-color: #3b82f6;
		color: #FFFFFF;
		text-align: center;
	}
	.mar-left {
		margin-left: 20rpx;
	}
	.mar-right {
		margin-right: 20rpx;
	}
	.mar-top {
		margin-top: 30rpx;
	}
	.task-title {
		font-size: 32rpx;
		color: #FFFFFF;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}
	.process-name-bg {
		margin-bottom: 30rpx;
	}
	input,
	.picker {
		/* width: 100%; */
		flex: 1;
		padding: 10px;
		border: 1px solid rgba(37, 99, 235, 1);
		border-radius: 6px;
		font-size: 16px;
		background-color: #1e40af;
		color: #FFFFFF;
	}
	
	.pose-point-xyz-bg {
		display: flex;
		align-items: center;
	}
	.xyz-input {
		
	}
	
	.other-setting-bg {
		padding-top: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.other-setting-img {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	.other-setting-txt {
		color: rgba(147, 197, 253, 1);
		font-size: 32rpx;
	}
</style>